<script setup lang="ts">
import { ref, onActivated } from "vue";
import { useStoreOrder } from "../utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";

defineOptions({
  name: "AdminDistribution"
});

const formRef = ref();
const tableRef = ref();
const {
  form,
  loading,
  columns,
  childColumns,
  dataList,
  pagination,
  deviceDetection,
  selectData,
  tabType,
  tabList,
  totalForm,
  onSearch,
  resetForm,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  showOrderDetail,
  showDistribition,
  doDeliveryGoods,
  handleOpt
} = useStoreOrder(0, tableRef);

onActivated(() => {});
</script>

<template>
  <div style="box-shadow: none">
    <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
      <div class="w-full">
        <!-- 筛选 -->
        <el-form
          ref="formRef"
          :inline="true"
          :model="form"
          class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
        >
          <el-form-item label="采购订单编号：" prop="storeOrderCode">
            <el-input
              v-model.trim="form.storeOrderCode"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <el-form-item label="子订单编号：" prop="suborderCode">
            <el-input
              v-model.trim="form.suborderCode"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <el-form-item label="所属门店：" prop="storeIds">
            <el-select
              v-model="form.storeIds"
              clearable
              filterable
              class="!w-[180px]"
              placeholder="请选择"
            >
              <el-option
                v-for="item in selectData.storeList"
                :key="item.id"
                :label="item.storeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关联供应商：" prop="supplierName">
            <el-input
              v-model.trim="form.supplierName"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <el-form-item label="业务日期：" prop="businessDate">
            <el-date-picker
              v-model="form.businessDate"
              class="!w-[250px]"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYYMMDD"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :icon="useRenderIcon('ri:search-line')"
              :loading="loading"
              @click="onSearch"
            >
              搜索
            </el-button>
            <el-button
              :icon="useRenderIcon(Refresh)"
              @click="resetForm(formRef)"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>

        <PureTableBar title="" :columns="columns" @refresh="onSearch">
          <template #left>
            <!-- 主订单状态 0 待审核 1 发货中 2 部分发货 3 已发货 4 已完成 5 已驳回 6 已取消 7 已关闭 -->
            <el-tabs v-model="tabType" class="mt-[15px] h-[28px]">
              <el-tab-pane
                v-for="(item, index) in tabList"
                :key="index"
                :name="item.name"
              >
                <template #label>
                  <span>{{ item.label }}</span>
                  <span v-if="item.count" class="pl-1">
                    ({{ item.count }})</span
                  >
                </template>
              </el-tab-pane>
            </el-tabs>
          </template>
          <!-- <template #buttons>
            <el-button type="primary">确认配货</el-button>
          </template> -->
          <template v-slot="{ size, dynamicColumns }">
            <div class="goods-table">
              <pure-table
                ref="tableRef"
                row-key="id"
                adaptive
                :adaptiveConfig="{ offsetBottom: 90 }"
                align-whole="center"
                :loading="loading"
                :size="size"
                :data="dataList"
                :columns="dynamicColumns"
                :pagination="{ ...pagination, size }"
                show
                showOverflowTooltip
                :header-cell-style="{
                  background: 'var(--el-fill-color-light)',
                  color: 'var(--el-text-color-primary)'
                }"
                @selection-change="handleSelectionChange"
                @page-size-change="handleSizeChange"
                @page-current-change="handleCurrentChange"
              >
                <template #expand="{ row }">
                  <div class="ml-[76px]">
                    <!-- ==================================== 子表格 =========================== -->
                    <pure-table
                      row-key="id"
                      class="bd-hide"
                      align-whole="center"
                      :data="row.orderItemResponses"
                      :columns="childColumns"
                      :header-cell-style="{
                        background: 'var(--el-fill-color-light)',
                        color: 'var(--el-text-color-primary)'
                      }"
                    />
                  </div>
                </template>
                <!-- 门店角色 -->
                <template #adminOperation="{ row }">
                  <el-button
                    link
                    type="primary"
                    :size="size"
                    @click="showOrderDetail(row)"
                  >
                    查看
                  </el-button>
                </template>
              </pure-table>
            </div>
          </template>
        </PureTableBar>
      </div>
    </div>
  </div>
</template>
<style>
.el-popconfirm__main {
  overflow-wrap: break-word;
  word-break: break-all;
}
</style>
<style lang="scss" scoped>
:deep(.bd-hide .el-table--fit .el-table__inner-wrapper:before) {
  background-color: #fff;
}
:deep(.icon-no .el-table__expand-icon) {
  display: none;
}
</style>
